<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/carousel.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <title>Document</title>
</head>

<body>
    <div class="wrap">
        <header>
            <div class="header_wrap ">
                <div class="login fl">
                    <button>login</button>
                </div>
                <div class="nav fr">
                    <img src="" alt="">
                    <img src="" alt="">
                    <button>layout out</button>
                </div>
            </div>
        </header>
        <article>
            <div class="wrap">
                <div class="navbar clearfix">
                    <div class="nav_title fl">
                        <p>Audience Overview</p>
                        <p class="sm">Rsafafa</p>
                    </div>
                    <div class="nav_list fr" id="nav_list">
                        <div class="clearfix" style="position:relative">
                            <a class="moveList fl first" id="first">Dashboard</a>
                            <a class="moveList fl">Projects</a>
                            <a class="moveList fl">Calendar</a>
                            <a class="moveList fl">mailbox</a>
                            <a class="moveList fl">settings</a>
                            <div class="nav-marker" id="nav-marker"></div>
                        </div>

                    </div>
                </div>
                <div class="banner clearfix">
                    <!--轮播图 -->
                    <div class="lunbo fl">
                        <div class='dd' id='dd'>
                            <ul type='none' id='imgList'>
                                <li><img id='picture' style="width:100%;height:280px;" src='./img/1.jpg'></li>
                            </ul>
                            <ul type='none' id='buttonList'>
                                <li class='curIndex'></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                            <div id='prev'><img src='./img/left.png'></div>
                            <div id='next'><img src='./img/right.png'></div>
                        </div>
                    </div>
                    <div class="case fr">
                        <div class="case_wrap">
                            <div class="view_all clearfix">
                                <p class="fl">Support Requests</p>
                                <button class="fr">View All</button>
                            </div>
                            <div class="detail_list">
                                <ul class="detail_list_wrap">
                                    <li class="list_item">
                                        <ul class="data_title clearfix">
                                            <li class="fl">TIME</li>
                                            <li class="fl">USER NAME</li>
                                            <li class="fl">STATUS</li>
                                        </ul>
                                    </li>
                                    <li class="list_item">
                                        <ul class="data_item clearfix">
                                            <li class="fl">9.45PM</li>
                                            <li class="fl">info@design.com</li>
                                            <li class="fl"><button>solved</button></li>
                                        </ul>
                                    </li>
                                    <li class="list_item">
                                        <ul class="data_item clearfix">
                                            <li class="fl">9.45PM</li>
                                            <li class="fl">info@design.com</li>
                                            <li class="fl"><button>solved</button></li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="data_list">
                    <div id="chartmain" style="width:1200px; height: 400px;"></div>
                </div>
                <div class="datanar clearfix">
                    <div id="pie" style="width:580px; height: 380px;" class="fl"></div>
                    <div id="category" style="width:580px; height: 400px;" class="fl"></div>
                </div>
            </div>
        </article>
        <div class="footer">
            <div class="container clearfix">
                <button class="fl">LOGIN OUT</button>
                <ul class="content fl clearfix">
                    <li class="list fl">
                        <ul class="notice">
                            <li>news</li>
                            <li>news</li>
                            <li>news</li>
                            <li>news</li>
                        </ul>
                    </li>
                    <li class="list fl">
                        <ul class="notice">
                            <li>news</li>
                            <li>news</li>
                            <li>news</li>
                            <li>news</li>
                        </ul>
                    </li>
                    <li class="list fl">
                        <ul class="notice">
                            <li>news</li>
                            <li>news</li>
                            <li>news</li>
                            <li>news</li>
                        </ul>
                    </li>
                    <li class="list fl">
                        <ul class="notice">
                            <li>news</li>
                            <li>news</li>
                            <li>news</li>
                            <li>news</li>
                        </ul>
                    </li>
                    <li class="list fl">
                        <ul class="notice">
                            <li>news</li>
                            <li>news</li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
<script src="./js/index.js"></script>
<script>
    let cloud = document.querySelector('.nav-marker');
    let nav = document.querySelector('.nav_list');
    let lis = nav.querySelectorAll('.moveList');
    let current = 0;
    for (let i = 0; i < lis.length; i++) {
        lis[i].addEventListener('mouseenter', function () {
            animate(cloud, this.offsetLeft);
        })
        lis[i].addEventListener('mouseleave', function () {
            animate(cloud, current);
        })
        lis[i].addEventListener('click', function () {
            for (let i = 0; i < lis.length; i++) {
                lis[i].style.color = '';
            }
            lis[i].style.color = '#00BFFF'
            current = this.offsetLeft;
        })

    }
    fetch('https://edu.telking.com/api?type=month')
        .then(async (res) => {
            let data = await res.json()
            Echart('chartmain', "曲线图数据展示", 'line', data.data.xAxis, data.data.series)
        })
    fetch('https://edu.telking.com/api?type=week')
        .then(async (res) => {
            let data = await res.json()
            let xAxis = data.data.xAxis
            let series = data.data.series
            let c = xAxis.map((name, i) => ({ name, value: series[i] }))
            Echart('pie', "饼状图数据展示", 'pie', "", c)
            Echart('category', "柱状图数据展示", 'category', data.data.xAxis, data.data.series)
        })


</script>


</html>